<template>
  <div class="delivery-progress">
    <Title title="发货进度" />
    <el-row :gutter="12" class="delivery-status">
      <el-col :span="12">
        <span>发货状态：</span>
        <span>{{ getDeliveryStatusLabel(deliveryData.deliverStatus, deliver_status) }}</span>
      </el-col>
      <el-col :span="12">
        <span>最晚提单日期：</span>
        <span>{{ formatTime(latestApplyTime, 'YYYY-MM-DD') }}</span>
      </el-col>
    </el-row>

    <StockoutTable
      :table-data="deliveryData.orderItemDetailResDTOS"
      :table-list="deliveryTableList"
      :get-summaries="getSummaries"
    />
  </div>
</template>

<script>
import StockoutTable from './StockDetailTable'
import Title from '@/components/Title'
import { mapState } from 'vuex'
import { formatTime } from '@/utils/tools'
export default {
  name: 'DeliveryProgress',
  components: {
    StockoutTable,
    Title
  },
  props: {
    deliveryData: {
      type: Object,
      default: () => {}
    },
    latestApplyTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      deliveryTableList: [
        {
          label: 'SKU',
          prop: 'skuCode',
          align: 'center'
        },
        {
          label: '英文产品名',
          prop: 'productNameEn',
          align: 'center'
        },
        {
          label: '中文产品名',
          prop: 'productNameZh',
          align: 'center'
        },
        {
          label: '产品型号',
          prop: 'productModel',
          align: 'center'
        },
        {
          label: '发货申请数量',
          prop: 'applyQuantity',
          align: 'center'
        },
        {
          label: '已出库数量',
          prop: 'shippedQuantity',
          align: 'center'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      deliver_status: state => state.base.deliver_status
    })
  },
  methods: {
    formatTime,
    getSummaries(params) {
      const { columns, data } = params
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1 || index === 2 || index === 3) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        }
      })
      return sums
    },
    getDeliveryStatusLabel(status, list = []) {
      const item = list.find(it => +it.value === +status) || {}
      return item.label
    }
  }
}
</script>

<style lang="scss" scoped>
.delivery-progress {
  font-size: 14px;
}
.delivery-status {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
  }
</style>
